<template>
  <!-- <BookListItem v-for="book in books" :data="book"></BookListItem> -->
  <a-list item-layout="vertical" size="large" :data-source="books">
    <template #renderItem="{ item }">
      <a-list-item key="item.name">
        <template #extra>
          <img width="272" alt="logo" :src="item.img" />
        </template>
        <a-list-item-meta :description="item.name">
          <template #title>
            <a :href="item.name">{{ item.name }}</a>
          </template>
        </a-list-item-meta>
        {{ item.name }}
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup>
const props = defineProps(["books"]);

const books = props.books;
</script>
